<template>
    <view>
        <view class="smart-page-head">
            <view class="smart-page-head-title">label, 标签</view>
        </view>
        <view class="smart-padding-wrap">
            <view class="item">
                <view class="title">label与checkbox组合</view>
                <checkbox-group>
                    <label class="checkbox-label">
                        <view class="label-content">
                            <checkbox value="option1" checked="true"/>
                            <text>选项一</text>
                        </view>
                    </label>
                    <label class="checkbox-label">
                        <view class="label-content">
                            <checkbox value="option2"/>
                            <text>选项二</text>
                        </view>
                    </label>
                    <label class="checkbox-label">
                        <view class="label-content">
                            <checkbox value="option3"/>
                            <text>选项三</text>
                        </view>
                    </label>
                </checkbox-group>
            </view>
            
            <view class="item">
                <view class="title">label与radio组合</view>
                <radio-group>
                    <label class="radio-label">
                        <view class="label-content">
                            <radio value="male" checked="true"/>
                            <text>男</text>
                        </view>
                    </label>
                    <label class="radio-label">
                        <view class="label-content">
                            <radio value="female"/>
                            <text>女</text>
                        </view>
                    </label>
                </radio-group>
            </view>
            
            <view class="item">
                <view class="title">label与switch组合</view>
                <label class="switch-label">
                    <view class="label-content">
                        <text>开启通知</text>
                        <switch checked="true"/>
                    </view>
                </label>
                <label class="switch-label">
                    <view class="label-content">
                        <text>自动播放</text>
                        <switch/>
                    </view>
                </label>
            </view>
            
            <view class="item">
                <view class="title">label与button组合</view>
                <label class="button-label">
                    <button type="primary">点击触发文件选择</button>
                    <button hidden="true">选择文件</button>
                </label>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .item {
        margin-bottom: 50rpx;
    }
    .title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 20rpx;
    }
    .checkbox-label, .radio-label, .switch-label {
        display: block;
        padding: 20rpx 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .label-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .button-label {
        display: block;
    }
    checkbox, radio {
        transform: scale(0.8);
    }
</style>